<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>喜怒无常的气球滑块</title>
		<style type="text/css">
			body{
	margin:0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #222;
}

div{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
input{
	width: 100%;
	min-width: 500px;
	margin-top: 2em;
}

.bubble{
	position: absolute;
	left:50%;
	transform: translateX(-53%) rotate(45deg);
	top: -160%;
	//transition: left 100ms;
	background: rgba(white,0.8);
	padding: 1em;
	border-radius: 50% 50% 5px 50%;
	box-shadow: 0 20px 20px -5px rgba(black,0.3);
	animation: pulse 2500ms infinite;
	svg{
		transform: rotate(-45deg);
	}
}

@keyframes pulse {
	0% {
		transform: translateX(-53%) rotate(45deg) translateY(0);
	}
	50%{
		transform: translateX(-61%) rotate(45deg) translateY(-10px);
	}
	100%{
		transform: translateX(-53%) rotate(45deg) translateY(0);
	}
}
		</style>
	</head>
	<body>
		<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
<div>
<div class="bubble">
		<svg id="Smiles" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
	<g id="smile1">
		
		<path fill="#FFFFFF" d="M39.7,16.1c0,2.4-1.9,4.3-4.3,4.3c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3C37.7,11.8,39.7,13.7,39.7,16.1z
			 M14.3,11.8c-2.4,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3s4.3-1.9,4.3-4.3S16.7,11.8,14.3,11.8z M39,39.7c0.9-0.3,1.4-1.2,1.1-2.1
			C37.5,29.2,30,25.8,23.7,26c-7.1,0.3-12.5,4.8-14.2,11.7c-0.2,0.9,0.3,1.8,1.2,2c0.9,0.2,1.8-0.3,2-1.2c1.6-6.5,6.7-9,11-9.1
			c5-0.2,11,2.6,13.1,9.3c0.2,0.7,0.9,1.2,1.6,1.2C38.7,39.8,38.9,39.7,39,39.7z"/>
	</g>
	<g id="smile2">
		
		<path fill="#FFFFFF" d="M28.3,33.3c0,1.9-1.5,3.4-3.4,3.4c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4
			C26.8,30,28.3,31.5,28.3,33.3z M39.4,16c0-0.4-0.3-0.7-0.7-0.7h-7.5c-0.4,0-0.7,0.3-0.7,0.7v1.1c0,0.4,0.3,0.7,0.7,0.7h7.5
			c0.4,0,0.7-0.3,0.7-0.7V16z M19.5,16c0-0.4-0.3-0.7-0.7-0.7h-7.5c-0.4,0-0.7,0.3-0.7,0.7v1.1c0,0.4,0.3,0.7,0.7,0.7h7.5
			c0.4,0,0.7-0.3,0.7-0.7V16z"/>
	</g>
	<g id="smile3">
		
		<path fill="#FFFFFF" d="M40.2,16.3c0,2.4-1.9,4.3-4.3,4.3s-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3S40.2,13.9,40.2,16.3z M14.8,12
			c-2.4,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3s4.3-1.9,4.3-4.3S17.2,12,14.8,12z"/>
		<line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="10.5" y1="35.1" x2="40.2" y2="35.1"/>
	</g>
		<g id="smile4">
	

<path fill="#FFFFFF" d="M39.8,15.3c0,2.4-1.9,4.3-4.3,4.3s-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3S39.8,12.9,39.8,15.3z M14.4,11
	c-2.4,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3s4.3-1.9,4.3-4.3S16.8,11,14.4,11z M40.2,27.3c0.3-0.9-0.2-1.8-1.1-2.1
	c-0.9-0.3-1.8,0.2-2.1,1.1c-2.1,6.7-8.1,9.4-13.1,9.3c-4.3-0.2-9.5-2.6-11-9.1c-0.2-0.9-1.1-1.5-2-1.2c-0.9,0.2-1.5,1.1-1.2,2
	c1.7,7,7.1,11.5,14.2,11.7c0.2,0,0.4,0,0.6,0C30.5,38.9,37.7,35.4,40.2,27.3z"/>
	</g>
		<g id="smile5">
	
	<path fill="#FFFFFF" d="M40,29.8C37.9,36.6,31.9,41,24.9,41c-7,0-12.6-4.4-14.2-11.3c-0.1-0.5,0-1,0.3-1.4c0.3-0.4,0.8-0.6,1.3-0.6
		h26.3c0.5,0,1,0.2,1.3,0.7C40.1,28.8,40.2,29.3,40,29.8z M20.2,20.2c0.5-0.5,0.5-1.3,0.1-1.8L16.2,14c-0.2-0.3-0.6-0.4-0.9-0.4
		c-0.3,0-0.7,0.1-0.9,0.4l-4.1,4.4c-0.5,0.5-0.4,1.3,0.1,1.8c0.5,0.5,1.3,0.4,1.8-0.1l3.2-3.4l3.2,3.4c0.2,0.3,0.6,0.4,0.9,0.4
		C19.7,20.5,20,20.4,20.2,20.2z M40.4,20.2c0.5-0.5,0.5-1.3,0.1-1.8L36.4,14c-0.2-0.3-0.6-0.4-0.9-0.4s-0.7,0.1-0.9,0.4l-4.1,4.4
		c-0.5,0.5-0.4,1.3,0.1,1.8c0.5,0.5,1.3,0.4,1.8-0.1l3.2-3.4l3.2,3.4c0.2,0.3,0.6,0.4,0.9,0.4C39.9,20.5,40.2,20.4,40.4,20.2z"/>
</g>
</svg>
	</div>
	<input type="range" min="1" max="100" step="1" value="50"/>
</div>
<script type="text/javascript">
	'use strict';
var myIcons = new SVGMorpheus('#Smiles', {
    iconId: 'smile3',
    duration: 250,
    rotation: 'none'
});
function percentageToHsl(percentage, hue0, hue1) {
    var hue = percentage * (hue1 - hue0) + hue0;
    return 'hsla(' + hue + ', 100%, 50%,0.5)';
}
var color = percentageToHsl(0.5, 0, 120);
document.querySelector('.bubble').style.background = color;
var input = document.querySelector('input');
input.addEventListener('input', function () {
    var color = percentageToHsl(this.value / 100, 0, 120);
    document.querySelector('.bubble').style.background = color;
    document.querySelector('.bubble').style.left = this.value + '%';
    myIcons.to('smile' + Math.round(this.value / 20));
});
</script>
	</body>
</html>
